<template>
  <div>
    <!-- 背景 -->
    <div class="mine">
      <div class="bgc_img">
        <img src="@/static/img/123.jpg" alt="" />
      </div>
    
      <div class="head">
        <div class="user">
          <div class="img"><img src="https://q1.qlogo.cn/g?b=qq&s=100&nk=274707021" alt="" /></div>
          <div class="nik_box">
            <div style="fontSize:14px" class="nickname">花落</div>
            <div class="attention">
              <span class="box_atten" @click="toSingerList">
                <span>关注</span>
                <span>{{ addSingerList.length }}</span>
                <!-- <span>999</span> -->
              </span>
            </div>
          </div>
        </div>
      </div>
      <p class="web">开源地址gitee:https://chenfhua.gitee.io/chenfuhua-vue-music</p>
    </div>
    <!-- 内容 -->
    <van-tabs v-model="active" sticky offset-top="46">
      <!-- 喜欢的音乐 -->
      <van-tab title="我喜欢的">
        <div class="noSongs" v-if="likeList.length == 0">暂无喜欢的歌曲</div>
        <div
          v-else
          class="music_box"
          v-for="(item, index) in likeList"
          :key="index.id"
        >
          <div class="index" @click="playMusiclikeList(index)">
            {{ index + 1 }}
          </div>
          <div class="text van-ellipsis" @click="playMusiclikeList(index)">
            <p class="van-ellipsis">{{ item.name }}</p>
            <p class="van-ellipsis">
              <span class="tagColor" style="color:red" v-if="item.fee == 1 || item.fee == 4"
                >版权
              </span>
              <span class="tagColor" v-else>SQ </span>
              <span>{{ item.ar }}</span>
              -
              <span>{{ item.al }}</span>
            </p>
          </div>
          <div class="slice">
            <span class="iconfont" @click="slice(index)">&#xe629;</span>
          </div>
        </div>
      </van-tab>
      <!-- 收藏歌单 -->
      <van-tab title="收藏歌单">
        <div class="noSongs" v-if="songList.length == 0">暂无收藏的歌单</div>
        <!-- 歌单列表 -->
        <div
          v-else
          class="singer"
          v-for="(item, index) in songList"
          :key="index"
        >
          <div class="img" @click="toDetail(item.id)">
            <img :src="item.bgc + '?param=120y120'" alt="" />
          </div>
          <div class="text van-ellipsis" @click="toDetail(item.id)">
            <p class="van-ellipsis">{{ item.msg }}</p>
            <p class="van-ellipsis">
              创建者: <span class="nickname">{{ item.nickname }}</span>
            </p>
          </div>
          <div class="sliceSongs">
            <span class="iconfont" @click="songSlice(index)">&#xe629;</span>
          </div>
        </div>
      </van-tab>
      <!-- 最近听的 -->
      <van-tab title="最近听的">
        <div class="noSongs" v-if="ListenRecentlyList.length == 0">最近没有听歌</div>
        <div v-else>
          <!-- 全部按钮 -->
          <div class="play_box">
            <div class="play" @click="playMusicsequencePlayList(0)">
              <span class="allplay">
                <span class="iconfont">&#xea82;</span>
              </span>
              <span class="allPlaytext">全部播放</span>
            </div>
            <div class="slice clear" @click="sliceAll()">
              <span>清空</span>
              <span class="iconfont">&#xe7aa;</span>
            </div>
          </div>
          <!-- 音乐列表 -->
          <div
            class="music_box"
            v-for="(item, index) in ListenRecentlyList"
            :key="index.id"
          >
            <div class="index" @click="playMusicsequencePlayList(index)">
              {{ index + 1 }}
            </div>
            <div
              class="text van-ellipsis"
              @click="playMusicsequencePlayList(index)"
            >
              <p class="van-ellipsis">{{ item.name }}</p>
              <p class="van-ellipsis">
                <span class="tagColor" v-if="item.fee == 1 || item.fee == 4"
                  >版权
                </span>
                <span class="tagColor" v-else>SQ </span>
                <span>{{ item.ar }}</span>
                -
                <span>{{ item.al }}</span>
              </p>
            </div>
            <div class="slice">
              <VueMusicMenu :id="item.id" :slice="true" />
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import { mapGetters, mapState } from "vuex";
import VueMusicMenu from "@/components/common/menu.vue";

export default {
  name: "MusicMines",
  data() {
    return { active: 0, noticeBarStatus: Boolean };
  },
  components: {
    VueMusicMenu,
  },
  computed: {
    ...mapGetters([
      "ListenRecentlyList",
      "likeList",
      "songList",
      "addSingerList",
    ]),
    ...mapState(["noticeBar"]),
  },
  mounted() {
    this.isCloseBar();
  },
  methods: {
    sliceAll() {
      Dialog.confirm({
        title: "是否清空 ?",
        message: "总共 （" + this.ListenRecentlyList.length + "） 首歌",
      })
        .then(() => {
          // 确认删除
          this.$store.commit("SET_STOPPLAY", false);
          this.$store.commit("SET_LISSTENRECENTLY_SLICE");
        })
        .catch(() => {});
    },
    slice(index) {
      Dialog.confirm({
        title: "是否删除音乐？\n",
      })
        .then(() => {
          // 确认删除
          this.$store.commit("SET_SLICEMUSIC", index);
          Toast("删除成功！");
        })
        .catch(() => {});
    },
    playMusiclikeList(index) {
      this.$store.commit({
        type: "SET_PLAY_MUSIC",
        index: index,
        list: this.likeList,
      });
    },
    playMusicsequencePlayList(index) {
      this.$store.commit({
        type: "SET_PLAY_MUSIC",
        index: index,
        list: this.ListenRecentlyList,
      });
    },
    toDetail(id) {
      this.$router.push({
        path: "/MusicDetail",
        query: { id },
      });
    },
    songSlice(i) {
      Dialog.confirm({
        title: "是否删除歌单？\n",
      })
        .then(() => {
          // 确认删除
          this.$store.commit("SET_SONG_LIST_SLICE", i);
          Toast("删除成功！");
        })
        .catch(() => {});
    },
    toSingerList() {
      if (this.addSingerList.length == 0) {
        Toast("暂无关注的歌手");
        return;
      } else {
        this.$router.push("/VueMusicMinesingerlist");
      }
    },
    isCloseBar() {
      if (this.noticeBar == true) {
        this.noticeBarStatus = true;
      } else {
        this.noticeBarStatus = false;
      }
    },
    close() {
      this.$store.commit("SET_CLOSE_NOTICEBAR", false);
    },
  },
};
</script>

<style lang="less" scoped>
.mine {
  position: relative;
  display: flex;
  height: 12.5rem;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .notice {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .web {
    position: absolute;
    top: 10.3125rem;
    width: 100%;
    color: #333;
  }
  .bgc_img {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
  
    img {
      width: 100%;
      height: 100%;
      -webkit-filter: blur(9px);
filter: blur(9px);
     
    }
  }
  .head {
    display: flex;
    justify-content: center;
    width: 9.375rem;
    height: 6.25rem;
    .user {
      width: 9.375rem;
      height: 6.25rem;
      .img {
        margin: 0 auto;
        height: 3.75rem;
        width: 3.75rem;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
       
        }
      }
      .nik_box {
        display: flex;
        justify-content: center;
        height: 1.5625rem;
        line-height: 1.5625rem;
        margin-top: 1.125rem;
        .nickname {
          font-size: 1.125rem;
        }
        .attention {
          font-size: .75rem;
          line-height: 1.5625rem;
          .box_atten {
            margin-left: .625rem;
            border-radius: 3.125rem;
            padding: .0625rem .3125rem;
            background-color: #000;
            color: #f1f3f4;
          }
          span:nth-child(2) {
            margin-left: .1875rem;
            font-size: .8125rem;
            font-weight: bold;
            color: #34c37e;
          }
        }
      }
    }
  }
}
.noSongs{ //空状态
  height: 6.25rem;
  margin: .9375rem;
  line-height: 6.25rem;
  border-radius: .3125rem;
  font-size: 1rem;
  font-weight: 430;
}
// 播放按钮
.play_box {
  display: flex;
  justify-content: space-between;
  height: 2.1875rem;
  line-height: 2.1875rem;
  padding-right: .9375rem;
  text-align: left;
  .allplay {
    display: inline-block;
    width: 1.875rem;
    height: 2.1875rem;
    line-height: 2.1875rem;
    text-align: center;
    .iconfont {
      font-size: 1.125rem;
        color:#11bf72;
    }
  }
  .allPlaytext {
    font-size: 1rem;
    font-weight: bold;
    padding-left: .1875rem;
  }
  .clear {
    color: #dd001b;
  }
}
// 音乐列表
.music_box {
  display: flex;
  margin: .3125rem 0rem;
  background-color: #fff;
  .index {
    width: 1.875rem;
    height: 3.125rem;
    line-height: 3.125rem;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    color: #555;
  }
  .text {
    flex: 1;
    display: flex;
    flex-direction: column;
    p {
      height: 1.5625rem;
      line-height: 1.5625rem;
      text-align: left;
      padding-left: .3125rem;
      font-size: 1rem;
      color: #222;
    }
    p:nth-child(2) {
      color: #a0a0a0;
      font-size: .75rem;
      .tagColor {
        color: #11bf72;
      }
    }
  }
  .slice {
    width: 3.125rem;
    height: 3.125rem;
    line-height: 3.125rem;
    text-align: center;
  }
}
//歌单
.singer {
  display: flex;
  height: 3.125rem;
  padding-left: .625rem;
  margin: .3125rem 0;
  // background-color: red;
  .sliceSongs {
    width: 3.125rem;
    height: 3.125rem;
    line-height: 3.125rem;
    text-align: center;
    .iconfont {
      font-size: 1rem;
    }
  }

  .img {
    width: 3.125rem;
    height: 3.125rem;
    line-height: 3.125rem;
    text-align: center;
    border-radius: .625rem;
    img {
      width: 100%;
      height: 100%;
      border-radius: .3125rem;
    }
  }
  .text {
    flex: 1;
    text-align: left;
    margin-left: .625rem;
    p {
      line-height: 1.5625rem;
      .nickname {
        color: #929292;
      }
    }
    p:nth-child(1) {
      font-size: 1rem;
      color: #36b98e;
    }
    p:nth-child(2) {
      font-size: .75rem;
      color: #666;
    }
  }
}
</style>